<script setup>
import { ref } from 'vue'
import { useShopAddressStore } from '@/stores/shopAddress'
import { ElMessageBox, ElMessage } from 'element-plus'
const shopAddress = useShopAddressStore()

// 订单列表
const title = ref()
const showAddDialog = ref(false)
// 地址信息
const fromAddress = ref({
  name: '',
  tel: '',
  place: '',
  id: Math.random()
})
// 表单校验规则
const rules = {
  name: [{ required: true, message: '名字不可以为空', trigger: 'blur' }],
  tel: [
    { required: true, message: '电话不可以为空', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('电话不可以为空'))
        } else if (!/^1[3-9]\d{9}$/.test(value)) {
          callback(new Error('请输入正确的手机号码格式'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  place: [{ required: true, message: '地址不可以为空', trigger: 'blur' }]
}
// 添加地址
const fromRef = ref(null)
const addAdressButton = () => {
  title.value = '添加地址'
  showAddDialog.value = true
  toggle.value = '1'
}
const toggle = ref()

// 添加地址确认
const addAdressSureButton = () => {
  fromRef.value.validate((valid) => {
    if (valid) {
      shopAddress.setFromAddress(fromAddress.value)
      ElMessage({
        message: '添加成功',
        type: 'success'
      })
      fromAddress.value = {
        name: '',
        tel: '',
        place: '',
        id: Math.random()
      }
      showAddDialog.value = false
    }
  })
}

// 编辑地址
const editAddress = (val) => {
  title.value = '编辑地址'
  showAddDialog.value = true
  toggle.value = '2'

  // 地址数据回显
  fromAddress.value = {
    name: val.name,
    tel: val.tel,
    place: val.place,
    id: val.id
  }
}

const editAdressSureButton = () => {
  fromRef.value.validate((valid) => {
    if (valid) {
      shopAddress.editFromAddress(fromAddress.value)
      ElMessage({
        message: '修改成功',
        type: 'success'
      })
      fromAddress.value = {
        name: '',
        tel: '',
        place: '',
        id: Math.random()
      }
      showAddDialog.value = false
    }
  })
}
// 删除地址
const delAddress = (val) => {
  ElMessageBox.confirm('确认删除地址吗？', '警告', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    shopAddress.delFromAddress(val.id)
    ElMessage({
      type: 'error',
      message: '删除成功'
    })
  })
}
// 弹窗取消与X按钮功能
const cancel = () => {
  showAddDialog.value = false
  fromAddress.value = {
    name: '',
    tel: '',
    place: '',
    id: Math.random()
  }
}
</script>

<template>
  <div class="order-container">
    <el-tabs>
      <el-button @click="addAdressButton" type="primary" plain>添加地址</el-button>
      <div class="main-container">
        <div class="text">
          <div class="none" v-if="shopAddress.fromAddress.length < 1">暂无地址</div>
          <ul v-else v-for="item in shopAddress.fromAddress" :key="item.id">
            <li>
              <span>收<i />货<i />人：</span>{{ item.name }}
            </li>
            <li><span>联系方式：</span>{{ item.tel }}</li>
            <li>
              <span>收货地址：</span>
              {{ item.place }}
            </li>
            <el-button @click="editAddress(item)" type="success" plain>编辑地址</el-button>
            <el-button @click="delAddress(item)" type="danger" plain>删除地址</el-button>
          </ul>
        </div>
      </div>
    </el-tabs>
  </div>
  <!-- 添加地址 -->
  <el-dialog
    v-model="showAddDialog"
    :title="`${title || '地址'}`"
    width="30%"
    center
    :destroy-on-close="true"
    :before-close="cancel"
  >
    <div>
      <el-form label-width="auto" :model="fromAddress" :rules="rules" ref="fromRef">
        <el-form-item label="收件人" prop="name">
          <el-input v-model="fromAddress.name" />
        </el-form-item>
        <el-form-item label="联系电话" prop="tel">
          <el-input v-model="fromAddress.tel" />
        </el-form-item>
        <el-form-item label="收货地址" prop="place">
          <el-input v-model="fromAddress.place" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="addAdressSureButton" v-if="toggle === '1'"
          >确定</el-button
        >
        <el-button type="primary" @click="editAdressSureButton" v-else>确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.order-container {
  padding: 10px 20px;

  .pagination-container {
    display: flex;
    justify-content: center;
  }

  .main-container {
    min-height: 500px;
    overflow-y: auto;
    .text {
      flex: 1;
      max-height: 500px; /* 你想要的最大高度 */
      overflow-y: auto;
      display: flex;
      flex-wrap: wrap;

      .none {
        line-height: 500px;
        font-size: 80px;
        color: #999;
        text-align: center;
        width: 100%;
      }

      > ul {
        flex: 50%;
        padding: 20px;

        li {
          line-height: 30px;

          span {
            color: #999;
            margin-right: 5px;

            > i {
              width: 0.5em;
              display: inline-block;
            }
          }
        }
      }

      > a {
        color: $xtxColor;
        width: 160px;
        text-align: center;
        height: 90px;
        line-height: 90px;
        border-right: 1px solid #f5f5f5;
      }
    }
  }
}
</style>
